<template>
	<NavBar :obj="{ title: formDataRef.type === 'password' ? '修改登录密码' : '修改支付密码', color: '#000', backgroundColor: '#fff' }" />

	<view class="layout-box">
		<view class="layout" v-if="is_set">
			<view class="label">原密码</view>
			<input class="inp" password placeholder-class="place-inp" placeholder="请填写原密码" v-model="formDataRef.old_password" />
		</view>
		<view class="layout">
			<view class="label">新密码</view>
			<input class="inp" password placeholder-class="place-inp" placeholder="请填写新密码" v-model="formDataRef.password" />
		</view>

		<view class="layout">
			<view class="label">确认密码</view>
			<input class="inp" password placeholder-class="place-inp" placeholder="请确认新密码" v-model="formDataRef.password_confirm" />
		</view>
	</view>
	<view class="fixed-bottom">
		<view class="btn" @click="submit">
			<text>确定</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { goBack, hint, port, loading, closeLoading } from '/service/port';
import { onLoad, onShow } from '@dcloudio/uni-app';

const is_set = ref(0);
const formDataRef = ref({
	type: '',
	old_password: '',
	password: '',
	password_confirm: ''
});
onShow(() => {
	getSecurityIndex();
});
async function getSecurityIndex() {
	const res = await port('getSecurityIndex');
	is_set.value = res.data.is_set;
}
const submit = async () => {
	loading();
	const res = await port('saveSecurity', formDataRef.value);
	setTimeout(() => {
		closeLoading();
		hint(res.msg);
		if (formDataRef.value.type == 'password') {
			uni.removeStorageSync('token');
			uni.reLaunch({
				url: '/pages/login'
			});
		} else {
			goBack();
		}
	}, 300);
};

onLoad((e) => {
	formDataRef.value.type = e.type;
});
</script>
<style scoped lang="scss">
:global(page) {
	background-color: #f0f0f0;
}
.layout-box {
	background: #ffffff;
	border-radius: 20rpx;
	margin: 26rpx 30rpx;
	padding: 0 23rpx;
	.layout {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eeeeee;
		display: flex;

		justify-content: space-between;
		&:last-child {
			border-bottom: none;
		}
		.label {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			width: 27%;
		}
		.inp {
			font-size: 28rpx;
			color: #333333;
			flex: 1 1 0%;
		}
		.place-inp {
			color: #bdbdbd;
			flex: 1 1 0%;
		}
		.textarea {
			height: 120rpx;
		}
		.icon {
			margin-right: 30rpx;
		}
	}
}
</style>
